<template>
  <div class="login_container">
    <!-- title是对话框左上角标题，vmodel控制显示与隐藏 涉及组件通信比较复杂-->
    <el-dialog
      v-model="useStore.visiable"
      title="用户登录"
      width="800"
      @close="close"
    >
      <!-- 对话框身体部分结构 -->
        <el-row>
          <!-- 左侧结构 -->
          <el-col :span="12">
            <div class="login">
              <div v-show="scene == 0">
                <el-form :model="loginParam" :rules="rules" ref="form">
                  <el-form-item prop="phone">
                    <el-input
                      v-model="loginParam.phone"
                      :prefix-icon="User"
                      placeholder="请输入手机号码"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="code">
                    <el-input
                      :prefix-icon="Lock"
                      v-model="loginParam.code"
                      placeholder="请输入手机验证码"
                    >
                    </el-input>
                    <el-form-item>
                      <el-button :disabled="!isPhone || flag ? true : false">
                        <countDown v-if="flag" :flag="flag" @getFlag="getFlag" />
                        <span v-else @click="getCode">获取验证码</span>
                      </el-button>
                    </el-form-item>
                  </el-form-item>
                  <el-button
                    style="width: 100%"
                    :disabled="!isPhone || loginParam.code.length < 6"
                    @click="login"
                    >用户登录</el-button
                  >
                  <div class="bottom" @click="change">
                    <p>微信扫码登录</p>
                    <svg
                      t="1716793919579"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="2663"
                      width="36"
                      height="36"
                    >
                      <path
                        d="M183.379592 699.559184c-4.179592 0-8.359184-1.044898-11.493878-3.657143-6.269388-4.702041-9.404082-12.016327-7.836734-19.330612l13.061224-77.322449C136.881633 553.273469 114.938776 496.326531 114.938776 437.289796 114.938776 292.571429 246.073469 175.020408 408.032653 175.020408c76.8 0 149.420408 26.644898 204.8 74.710204 55.379592 48.587755 86.726531 113.893878 88.293878 183.379592 0 5.746939-2.089796 10.971429-6.269388 14.628572s-9.404082 5.746939-15.151021 5.746938c-5.22449-0.522449-9.404082-0.522449-13.583673-0.522449-112.326531 0-203.232653 79.934694-203.232653 178.677551 0 13.583673 1.567347 27.167347 5.22449 40.751021 1.567347 5.746939 0.522449 11.493878-2.612245 16.195918-3.134694 4.702041-8.359184 7.836735-14.106123 8.881633-14.106122 2.089796-28.734694 3.134694-43.363265 3.134694-52.767347 0-104.489796-12.538776-149.420408-36.571429l-65.828572 34.481633c-3.134694 0-6.269388 1.044898-9.404081 1.044898z"
                        fill="#0B9682"
                        p-id="2664"
                      ></path>
                      <path
                        d="M303.542857 352.653061m-35.004081 0a35.004082 35.004082 0 1 0 70.008163 0 35.004082 35.004082 0 1 0-70.008163 0Z"
                        fill="#DCFFFA"
                        p-id="2665"
                      ></path>
                      <path
                        d="M512 352.653061m-35.004082 0a35.004082 35.004082 0 1 0 70.008164 0 35.004082 35.004082 0 1 0-70.008164 0Z"
                        fill="#DCFFFA"
                        p-id="2666"
                      ></path>
                      <path
                        d="M849.502041 849.502041c-3.134694 0-6.269388-0.522449-9.404082-2.089796l-52.244898-27.167347c-37.093878 19.330612-78.889796 29.779592-122.253061 29.779592-134.269388 0-242.938776-98.220408-242.938776-218.383674S531.853061 412.734694 665.6 412.734694 909.061224 510.955102 909.061224 631.118367c0 48.065306-17.763265 95.085714-50.677551 133.22449l10.44898 61.64898c1.044898 7.314286-1.567347 15.15102-7.836735 19.330612-3.134694 3.134694-7.314286 4.179592-11.493877 4.179592z"
                        fill="#16C4AF"
                        p-id="2667"
                      ></path>
                      <path
                        d="M576.261224 575.738776m-29.779591 0a29.779592 29.779592 0 1 0 59.559183 0 29.779592 29.779592 0 1 0-59.559183 0Z"
                        fill="#DCFFFA"
                        p-id="2668"
                      ></path>
                      <path
                        d="M755.461224 575.738776m-29.779591 0a29.779592 29.779592 0 1 0 59.559183 0 29.779592 29.779592 0 1 0-59.559183 0Z"
                        fill="#DCFFFA"
                        p-id="2669"
                      ></path>
                    </svg>
                  </div>
                </el-form>
              </div>
              <div class="wechat" v-show="scene == 1">
                <div id="login_container"></div>
                <div class="phone" @click="handler">
                  <p>手机短信验证码登录</p>
                  <svg
                    t="1716880665020"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2750"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z"
                      p-id="2751"
                    ></path>
                  </svg>
                </div>
              </div>
            </div>
          </el-col>
          <!-- 右侧结构 -->
          <el-col :span="12">
            <div class="leftContent">
              <div class="top">
                <div class="item">
                  <img src="../../assets/images/code_app.png" alt="" />
                  <svg
                    t="1716793919579"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2663"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M183.379592 699.559184c-4.179592 0-8.359184-1.044898-11.493878-3.657143-6.269388-4.702041-9.404082-12.016327-7.836734-19.330612l13.061224-77.322449C136.881633 553.273469 114.938776 496.326531 114.938776 437.289796 114.938776 292.571429 246.073469 175.020408 408.032653 175.020408c76.8 0 149.420408 26.644898 204.8 74.710204 55.379592 48.587755 86.726531 113.893878 88.293878 183.379592 0 5.746939-2.089796 10.971429-6.269388 14.628572s-9.404082 5.746939-15.151021 5.746938c-5.22449-0.522449-9.404082-0.522449-13.583673-0.522449-112.326531 0-203.232653 79.934694-203.232653 178.677551 0 13.583673 1.567347 27.167347 5.22449 40.751021 1.567347 5.746939 0.522449 11.493878-2.612245 16.195918-3.134694 4.702041-8.359184 7.836735-14.106123 8.881633-14.106122 2.089796-28.734694 3.134694-43.363265 3.134694-52.767347 0-104.489796-12.538776-149.420408-36.571429l-65.828572 34.481633c-3.134694 0-6.269388 1.044898-9.404081 1.044898z"
                      fill="#cdcdcd"
                      p-id="2664"
                    ></path>
                    <path
                      d="M303.542857 352.653061m-35.004081 0a35.004082 35.004082 0 1 0 70.008163 0 35.004082 35.004082 0 1 0-70.008163 0Z"
                      fill="#cdcdcd"
                      p-id="2665"
                    ></path>
                    <path
                      d="M512 352.653061m-35.004082 0a35.004082 35.004082 0 1 0 70.008164 0 35.004082 35.004082 0 1 0-70.008164 0Z"
                      fill="#cdcdcd"
                      p-id="2666"
                    ></path>
                    <path
                      d="M849.502041 849.502041c-3.134694 0-6.269388-0.522449-9.404082-2.089796l-52.244898-27.167347c-37.093878 19.330612-78.889796 29.779592-122.253061 29.779592-134.269388 0-242.938776-98.220408-242.938776-218.383674S531.853061 412.734694 665.6 412.734694 909.061224 510.955102 909.061224 631.118367c0 48.065306-17.763265 95.085714-50.677551 133.22449l10.44898 61.64898c1.044898 7.314286-1.567347 15.15102-7.836735 19.330612-3.134694 3.134694-7.314286 4.179592-11.493877 4.179592z"
                      fill="#cdcdcd"
                      p-id="2667"
                    ></path>
                    <path
                      d="M576.261224 575.738776m-29.779591 0a29.779592 29.779592 0 1 0 59.559183 0 29.779592 29.779592 0 1 0-59.559183 0Z"
                      fill="#cdcdcd"
                      p-id="2668"
                    ></path>
                    <path
                      d="M755.461224 575.738776m-29.779591 0a29.779592 29.779592 0 1 0 59.559183 0 29.779592 29.779592 0 1 0-59.559183 0Z"
                      fill="#cdcdcd"
                      p-id="2669"
                    ></path>
                  </svg>
                  <p>微信扫一扫关注</p>
                  <p>“快速预约挂号”</p>
                </div>
                <div class="item">
                  <img src="../../assets/images/code_login_wechat.png" alt="" />
                  <svg
                    t="1716794743682"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="3935"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z"
                      p-id="3936"
                    ></path>
                  </svg>
                  <p>扫一扫下载</p>
                  <p>“快速预约挂号”</p>
                </div>
              </div>
            </div>
            <p class="tip">官方挂号平台</p>
            <p class="tip">快速挂号安全放心</p>
          </el-col>
        </el-row>
  
      <template #footer>
        <el-button @click="closeDialog">关闭窗口</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import countDown from "@/components/count_down/index.vue";
import { ref, reactive, computed } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import useUserStore from "@/store/modules/user";
import type { WxLoginResponseData } from "@/api/hospital/type";
// 引入微信扫码登陆请求
import { reqWxLogin } from "@/api/hospital/index";
let useStore = useUserStore();
// 控制手机或者扫码的登录显示与隐藏
let scene = ref<number>(0);
let loginParam = reactive({
  phone: "",
  // 收集验证码
  code: "",
});
// 控制倒计时组件的显示隐藏,真为开启倒计时，假为不是倒计时
let flag = ref<boolean>(false);
// 获取form组件实例
let form = ref<any>();
// 控制扫描二维码显示
let change = async () => {
  scene.value = 1;
  // 向服务器发请求获取微信扫码登陆页面参数，需要携带参数：用户授权以后重定向到项目的某个页面
  // 编码后的当前页面
  let redict_URL = encodeURIComponent(window.location.origin + `/wxlogin`);
  let res: WxLoginResponseData = await reqWxLogin(redict_URL);
  // 生成二维码页面
  // @ts-ignore
  var obj = new WxLogin({
    self_redirect: true, //true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri
    id: "login_container", //第三方页面显示二维码的容器id
    appid: res.data.appid, //应用唯一标识
    scope: "snsapi_login", //微信扫码页面已经授权
    redirect_uri: res.data.redirectUri, //后台提供
    state: res.data.state, //后台服务器重定向的地址，携带用户参数
    style: "black", //二维码外观
    href: "", //自定义样式链接
  });
};
// 获取验证码
let getCode = async () => {
  // 解决element plus的bug，禁用依旧能点击
  if (!isPhone.value || flag.value) {
    return;
  }
  // 开启倒计时
  flag.value = true;
  try {
    // 获取验证码成功
    await useStore.getCode(loginParam.phone);
    loginParam.code = useStore.code;
  } catch (error) {
    // 获取失败
    alert(error as Error);
  }
};
// 自定义事件，控制父组件显示哪个
let getFlag = (val: boolean) => {
  // 倒计时模式结束
  flag.value = val;
};
let handler=()=>{
  scene.value=0;
}
// 点击用户登录的方法
let login = async () => {
  // 保证表单输入正确
  await form.value.validate;
  // 发起登录请求，对话框关闭，右上角显示用户的名字
  // 失败的话提示
  try {
    await useStore.userLogin(loginParam);
    // 关闭对话框
    useStore.visiable = false;
  } catch (error) {
    alert(error);
  }
};
// 计算当前表单内容是否正确
let isPhone = computed(() => {
  const reg =
    /1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}/;
  // 返回布尔值
  return reg.test(loginParam.phone);
});
// 手机号码的自定义校验规则
// @ts-ignore
let validatePhone = (rule: any, value: any, callback: any) => {
  // rule当前的表单校验对象，value文本，cb回调函数,
  const reg =
    /1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}/;
  if (reg.test(value)) {
    callback();
  } else {
    callback(new Error("请输入正确的手机号码"));
  }
};
// @ts-ignore
let validateCode = (rule: any, value: any, callback: any) => {
  if (/^\d{6}$/.test(value)) {
    callback();
  } else {
    callback(new Error("请输入正确的验证码"));
  }
};
// 表单校验
const rules = {
  // 手机号码的校验规则
  // phone:[
  //   // 是否需要校验，错误的提示信息，校验时机
  //   // elementplus自带的校验规则不适用各种场景
  //   {required:true,message:'手机号码务必为11位',trigger:'change',min:11},
  // ],
  // code:[
  //   {required:true,message:'验证码必须为6位',trigger:'blur',min:6}
  // ]

  // 自定义校验规则
  phone: [{ validator: validatePhone, trigger: "blur" }],
  code: [{ validator: validateCode, trigger: "blur" }],
};
// 对话框关闭的回调
let close = () => {
  // 清空收集的数据
  Object.assign(loginParam, { phone: "", code: "" });
  // 清除上一次校验的结果
  form.value.resetFields();
};
// 点击关闭窗口按钮
let closeDialog = () => {
  Object.assign(loginParam, { phone: "", code: "" });
  // 清除上一次校验的结果
  form.value.resetFields();
  useStore.visiable = false;
};
</script>
<style lang="scss" scoped>
// 使用深度选择器,更改组件的内部结构完成需要的静态搭建
.login_container {
  ::v-deep(.el-dialog__body) {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }

  .login {
    padding: 20px;
    border: 1px solid #ccc;
    .wechat {
      display: flex;
      flex-direction: column;
      align-items: center;
      #login_container{
        height: 400px;
      }
      .phone {
        display: flex;
        flex-direction: column;
        align-items: center;
        p {
          margin: 10px 0px;
        }
      }
    }
  }
  .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    p {
      margin: 10px 0px;
    }
  }

  .leftContent {
    .top {
      display: flex;
      justify-content: space-around;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 130px;
          height: 130px;
        }
        p {
          margin: 5px 0px;
        }
      }
    }
  }

  .tip {
    text-align: center;
    margin: 20px 0px;
    font-size: 20px;
    font-weight: 900;
  }
}
</style>
